<template>
  <el-dialog
    v-model="visible"
    title="学生选课情况"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <TableWrapper
      :valueData="dataList"
      :columns="columns"
      @pageSize="pageSize"
      @currentPage="currentPage"
      :pageCurrent="{...pageCurrent,total}"
    >
      <template #teacherId="{ row }">{{ getTeacherName(row.teacherId) }}</template>
      <template #courseStatus="{ row }">{{ cStatus[row.courseStatus] }}</template>
    </TableWrapper>
    <template v-slot:footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, defineProps } from "vue";
import baseService from "@/service/baseService";
import { isEmail, isMobile } from "@/utils/utils";
import { IObject } from "@/types/interface";
import { ElMessage } from "element-plus";
import TableWrapper from "@/components/table/TableWrapper.vue";
const emit = defineEmits(["refreshDataList"]);
const visible = ref(false);
const dataFormRef = ref();
const dataList = ref([]);
const total = ref("0");
const pageCurrent = reactive({
  pageNum: "1",
  pageSize: 20
});
const columns = ref([
  {
    value: "studentName",
    label: "学生姓名"
  },
   {
    value: "userName",
    label: "学号"
  },
  {
    value: "majorName",
    label: "专业"
  },
  {
    value: "className",
    label: "班级"
  },
]);
const init = (value?: object) => {
  visible.value = true;
  getList(value.id);
};
const pageSize = (val) => {
  pageCurrent.pageSize = val;
  getList();
};
const currentPage = (val) => {
  pageCurrent.pageNum = val;
  getList();
};
const getList = (id) => {
  console.log(id)
  let param = {
    ...pageCurrent,
    query: {
      courseId: id,
    }
  };
  baseService
    .post("/cam/atten/pageCourseItem", param)
    .then((res) => {
      if (res.code === 0) {
        dataList.value = res.data.records;
        total.value = res.data.total;
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch(() => {});
};

defineExpose({
  init
});
</script>

<style lang="less" scoped>
.mod-sys__user {
  .role-list {
    .el-select {
      width: 100%;
    }
  }
}
</style>
